<template>
  <!--实物管理 -->
  <div>
    <div>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="商品名称">
          <el-input
            v-model="formInline.goodsName"
            placeholder="请输入商品名称"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select
            v-model="formInline.status"
            placeholder="请选择状态"
            clearable
          >
            <el-option label="未上架" :value="0"></el-option>
            <el-option label="已上架" :value="1"></el-option>
            <el-option label="已下架" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchFn()">搜索</el-button>
        </el-form-item>
        <div class="z-flex">
          <div>
            <span>总兑换数：{{ totalExchange }}</span>
            <span class="margin-left20 margin-right20"
              >总消耗金币数：{{ totalCoins }}</span
            >
            <span>总成本：{{ totalPurchaseCost }}</span>
          </div>
          <el-form-item>
            <el-button type="primary" @click="exportdata()">导出</el-button>
            <el-button type="primary" @click="addGood()">新增商品</el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <div>
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        header-cell-class-name="thead"
      >
        <el-table-column label="ID" prop="id"></el-table-column>
        <el-table-column label="商品名称" prop="goodsName"></el-table-column>
        <el-table-column
          label="所需金币"
          prop="exchangeCoins"
        ></el-table-column>
        <el-table-column label="库存" prop="stockCount"></el-table-column>
        <el-table-column label="兑换数" prop="exchangeCount"></el-table-column>
        <el-table-column
          label="消耗金币"
          prop="total_consume_coins"
        ></el-table-column>
        <el-table-column label="成本(元)" prop="total_cost"></el-table-column>
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <div>
              <el-switch
                v-model="scope.row.status"
                @change="switchChange($event, scope.row)"
              ></el-switch>
              <a @click="edit(scope.row)" v-if="scope.row.status != 1">编辑</a>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pageIndex"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        :total="totalPage"
        layout="total, sizes, prev, pager, next, jumper"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import { getGoodList, updateGoodStatus, exportGood } from '@/api/goods.js'
export default {
  data () {
    return {
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      totalCoins: 0,
      totalExchange: 0,
      totalPurchaseCost: 0,
      formInline: {
        goodsName: '',
        status: ''
      },
      tableData: []
    }
  },
  activated () {
    this.getDataList()
  },
  methods: {
    async getDataList () {
      let res = await getGoodList({
        pageNum: this.pageIndex,
        size: this.pageSize,
        goodsName: this.formInline.goodsName,
        status: this.formInline.status
      })
      if (res[0]) {
        return
      }
      if (res[1].code == 0) {
        this.totalPage = res[1].totalCount
        this.totalExchange = res[1].totalExchange
        this.totalCoins = res[1].totalCoins
        this.totalPurchaseCost = res[1].totalPurchaseCost
        this.tableData = res[1].goodsList
        if (this.tableData && this.tableData.length) {
          this.tableData.forEach(ele => {
            ele.status = ele.status == 1
          })
        }
      }
    },
    async exportdata () {
      let res = await exportGood({
        goodsName: this.formInline.goodsName,
        status: this.formInline.status
      })
      if (res.status === 200) {
        let filename = decodeURI('导出商品.xlsx')
        filename = filename.replace(/\"/g, '')
        this.$downloadExcel(res.data, filename)
      }
    },
    addGood () {
      this.$router.push({ name: 'add-material-object' })
    },
    searchFn () {
      this.pageIndex = 1
      this.getDataList()
    },
    async switchChange (e, row) {
      let res = await updateGoodStatus({ good_id: row.id, status: e ? 1 : 2 })
      if (res[0]) {
        return
      }
      if (res[1].code == 0) {
        this.$message.success(e ? '上架成功！' : '下架成功！')
        this.getDataList()
      }
    },
    // 每页数
    sizeChangeHandle (val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle (val) {
      this.pageIndex = val
      this.getDataList()
    },
    edit (row) {
      this.$router.push({ name: 'add-material-object', query: { id: row.id } })
    }
  }
}
</script>
<style scoped>
a {
  cursor: pointer;
}
.z-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
